<script setup>
import {reactive} from "vue";
import router from "@/router/index.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}"),
  port: 'http://localhost:9999',
})

const loginOut = () => {
  localStorage.removeItem('code_user')
  router.push('/')
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('code_user' || '{}'))
}

</script>

<template>
  <div class="main-body">
    <div style="margin-left: 15px;display: flex;align-items: center">
      <el-dropdown>
        <div style="display: flex;align-items: center;">
          <el-image
              v-if="data.user.avatar"
              style="width: 50px;height: 50px;border-radius: 50%"
              :src="data.port + data.user.avatar"
          />
          <img v-else src="@/assets/img/defaul_avatar.png" style="width: 50px;height: 50px;border-radius: 50%">
          <span style="margin-left: 10px">{{data.user?.username}}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/home/person')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="router.push('/home/updatePassword')">修改密码</el-dropdown-item>
            <el-dropdown-item @click="router.push('/home/order')">订单查看</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

    </div>
    <div class="content-body">
      <router-view @updateUser="updateUser"></router-view>
    </div>
  </div>
</template>

<style scoped>
.main-body {
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: flex-end;
}
.content-body {
  margin-top: 6px;
  padding: 10px 15px;
  background-color: white;
  height: 92vh;
  border-top-right-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 8px rgba(0, 0, 0, .12);
}

.select-classification-box {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: rgba(0, 0, 0, 0.14) 1px solid;
}

.dept-box-primary {
  background-color: rgba(64, 158, 255, 0.86);
  border-color: #409eff;
  color: white;
}

.content-wrapper {
  flex: 1;
  overflow-y: auto;
  height: 100%;
}
</style>
